<template>
    <div id="register">
        <div style="width: 500px; margin: 50px auto; padding: 30px 50px;">
            <h1 style="text-align: center; margin: 20px 0;">注册页面</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="头像" prop="avatar">
                    <el-upload

                            action="http://localhost:9080/upload"
                            name="picFile"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="用户名:" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname">
                    <el-input v-model="ruleForm.nick"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="gender">
                    <template>
                        <el-radio v-model="ruleForm.sex" label='1'>男</el-radio>
                        <el-radio v-model="ruleForm.sex" label='0'>女</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="电子邮箱:" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="验证码:" prop="yzm">
                    <el-input v-model="ruleForm.yzm"></el-input>
                    <div v-if="show == 0" @click="getcode">获取验证码</div>
                    <div v-if="show == 1">已发送{{count}}秒</div>
                    <div v-if="show == 2" @click="getcode">重新获取</div>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {

            return {
                show: 0,
                count: '',
                timer: null,
                ruleForm: {
                    avatar: '',
                    username: '',
                    password: '',
                    sex: '1',
                    email: '',
                    yzm: '',//验证码
                    nick: '',
                },
                yzyzm:"",
                dialogVisible: false,
                dialogImageUrl: '',
                rules: {
                    username: [
                        {required: true, message: "请输入您的名称", trigger: 'blur'},
                        {min: 2, max: 9, message: "长度2到9个字符", trigger: 'blur'}
                    ],
                    nick: [
                        {required: true, message: "请输入您的昵称", trigger: 'blur'},
                        {min: 2, max: 10, message: "长度2到10个字符", trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: "请输入您的密码", trigger: 'blur'},
                        {min: 6, max: 16, message: "长度6到16个字符", trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: "请输入您的邮箱", trigger: 'blur'},
                        {
                            pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                            message: "请输入正确的邮箱格式",
                            trigger: 'blur'
                        }
                    ],
                }
            };
        },
        methods: {
            getcode() {
                if(this.ruleForm.email==""){
                    alert("请先输入邮箱");
                    return;
                }
                const times = 60; // 倒计时时间
                if (!this.timer) {
                    this.count = times;
                    this.show = 1;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= times) {
                            this.count--;
                        } else {
                            this.show = 2;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
                let url = "http://localhost:9080/users/getEmailYZM"
                this.axios.post(url, this.ruleForm).then((response) => {
                    this.yzyzm = response.data
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSuccess(response, file, fileList) {
                //把服务器响应的图片路径 给到Vue的变量
                this.ruleForm.avatar = response;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            submitForm(formName) {
                if (this.ruleForm.avatar == "") {
                    alert("请选择上传的图片")
                    return;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.yzm!=this.yzyzm){
                            this.$notify({
                                title: '注册新用户失败',
                                message: '验证码错误',
                            });
                            return ;
                        }
                        if (this.ruleForm.yzm.trim()==""){
                            this.$notify({
                                title: '注册新用户失败',
                                message: '验证码不能为空',
                            });
                            return;
                        }
                        let url = 'http://localhost:9080/users/reg';
                        console.log('尝试添加新用户.....');
                        console.log('请求路径为:' + url);
                        console.log('请求参数为:' + this.ruleForm);
                        this.ruleForm.sex = parseInt(this.ruleForm.sex)
                        console.log(this.ruleForm)
                        let formData = this.qs.stringify(this.ruleForm);
                        console.log('将ruleForm对象转换为FormData:')
                        console.log(formData);
                        this.axios.post(url, formData).then((response) => {
                            console.log('服务器端响应的结果：' + response);
                            console.log(response);
                            let responserDate = response.data;
                            if (responserDate.state == 20000) {
                                console.log('注册新用户成功');
                                this.$message({
                                    message: '注册新用户成功！',
                                    type: 'success'
                                });
                                url ='http://localhost:9080/code/insert'
                                this.axios.post(url,formData).then((response)=>{

                                })
                            } else {
                                console.log(responserDate.message);
                                this.$notify.error({
                                    title: '注册新用户失败',
                                    message: responserDate.message,
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //file.response得到的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
                let url = file.response;
                //发出删除图片的请求
                this.axios.get("http://localhost:9080/remove?url=" + url).then(function () {
                    alert("删除成功!");
                    this.ruleForm.avatar = "";
                })
            }
        }
    }
</script>

<style>

</style>

